import { UploadOutlined } from '@ant-design/icons';
import { Button, Carousel, Image, message, Result, Space, Tabs, Upload, UploadProps } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { dataList, removeData } from './service';
import { CarouselRef } from 'antd/es/carousel';
import { RiskMapListItem } from './data';
import CheckModule from '@/components/CheckModule';

/**
 * 删除风险
 *
 * @param selectedRows
 */

const handleRemove = async (selectedRows: RiskMapListItem[]) => {
  const hide = message.loading('正在删除');
  if (!selectedRows) return true;

  try {
    await removeData(selectedRows.map((row) => row.id));
    hide();
    message.success('删除成功，即将刷新');
    return true;
  } catch (error) {
    debugger;
    hide();
    message.error('删除失败，请重试');
    return false;
  }
};

const RiskMapPage: React.FC = () => {
  const [uploading, setUploading] = useState<boolean>(false);
  const [currentMapData, setCurrentMapData] = useState<RiskMapListItem[]>([]);
  const [currentMapData1, setCurrentMapData1] = useState<RiskMapListItem[]>([]);
  const carouselRef = useRef<CarouselRef>();
  useEffect(() => {
    dataList('1').then(({ data }) => {
      console.log(data);
      setCurrentMapData(data);
    });
    dataList('2').then(({ data }) => {
      console.log(data);
      setCurrentMapData1(data);
    });
  }, []);
  const props: UploadProps = {
    headers: {
      Authorization: `Bearer ${localStorage.getItem('token')}`,
    },
    showUploadList: false,
    multiple: false,
    onChange({ file }) {
      console.log(uploading);
      setUploading(file.status === 'uploading');
      console.log(file);
      if (file.status === 'done' && file.response.code === 200) {
        message.success('上传成功');
      }
      if (file.status === 'done' && file.response.code !== 200) {
        message.error(file.response.msg);
      }
    },
    name: 'file',
    // @ts-ignore
    max: 1,
  };
  return (
    <CheckModule code={'SC'}>
      <PageContainer
        extra={[
          <Upload key={'upload1'} {...props} action={'/v2/enterprise/risk-map/upload/1'}>
            <Button type="primary" loading={uploading} icon={<UploadOutlined />}>
              添加风险图
            </Button>
          </Upload>,

          <Upload key={'upload2'} {...props} action={'/v2/enterprise/risk-map/upload/2'}>
            <Button type="primary" loading={uploading} icon={<UploadOutlined />}>
              添加四色图
            </Button>
          </Upload>,
        ]}
      >
        <div style={{ background: '#fff', padding: '15px' }}>
          <Tabs defaultActiveKey="1">
            <Tabs.TabPane tab="作业风险图" key="1">
              {currentMapData.length > 0 ? (
                // @ts-ignore
                <Carousel autoplay ref={carouselRef}>
                  {currentMapData.map((item, index) => (
                    <div
                      style={{ textAlign: 'center', margin: 'auto 0', background: '#fff' }}
                      key={item.id}
                    >
                      <Image height={'800px'} preview={false} src={item.content} />
                      <div>
                        <Space style={{ marginBottom: '10px' }}>
                          <span>
                            {' '}
                            第 {index + 1} 张 / 共 {currentMapData.length} 张
                          </span>

                          <Button
                            key="delete"
                            danger
                            onClick={() => {
                              handleRemove([item]).then((r) => {
                                dataList('1').then(({ data }) => {
                                  console.log(data);
                                  setCurrentMapData(data);
                                });
                              });
                            }}
                          >
                            删除此图
                          </Button>

                          <Button
                            key="2"
                            onClick={() => {
                              carouselRef.current?.prev();
                            }}
                          >
                            上一个
                          </Button>

                          <Button
                            key="3"
                            onClick={() => {
                              carouselRef.current?.next();
                            }}
                          >
                            下一个
                          </Button>
                        </Space>
                      </div>
                    </div>
                  ))}
                </Carousel>
              ) : (
                <Result status="info" title="暂无数据" />
              )}
            </Tabs.TabPane>
            <Tabs.TabPane tab="四色图" key="2">
              {currentMapData1.length > 0 ? (
                // @ts-ignore
                <Carousel autoplay ref={carouselRef}>
                  {currentMapData1.map((item, index) => (
                    <div
                      style={{ textAlign: 'center', margin: 'auto 0', background: '#fff' }}
                      key={item.id}
                    >
                      <Image height={'800px'} preview={false} src={item.content} />
                      <div>
                        <Space style={{ marginBottom: '10px' }}>
                          <span>
                            {' '}
                            第 {index + 1} 张 / 共 {currentMapData1.length} 张
                          </span>

                          <Button
                            key="delete"
                            danger
                            onClick={() => {
                              handleRemove([item]).then((r) => {
                                dataList('2').then(({ data }) => {
                                  console.log(data);
                                  setCurrentMapData(data);
                                });
                              });
                            }}
                          >
                            删除此图
                          </Button>

                          <Button
                            key="2"
                            onClick={() => {
                              carouselRef.current?.prev();
                            }}
                          >
                            上一个
                          </Button>

                          <Button
                            key="3"
                            onClick={() => {
                              carouselRef.current?.next();
                            }}
                          >
                            下一个
                          </Button>
                        </Space>
                      </div>
                    </div>
                  ))}
                </Carousel>
              ) : (
                <Result status="info" title="暂无数据" />
              )}
            </Tabs.TabPane>
          </Tabs>
        </div>
      </PageContainer>
    </CheckModule>
  );
};

export default RiskMapPage;
